<template>
  <div class="table" :class="{ tableClass: tableClass ? 'tableClass' : '' }">
    <el-table
      @row-click="handleRowClick"
      v-loading="isLoading"
      :header-cell-style="headerStyle"
      :cell-style="cellStyle"
      :data="tableData"
      border
      style="width: 100%"
      :height="height"
      class="f12"
      :show-summary="summary"
      :summary-method="getSummaries"
      @selection-change="selectList"
      @sort-change="sortChange"
      highlight-current-row
      :row-key="rowKey"
      ref="multipleTableRef"
      header-cell-class-name=""
      :span-method="objectSpanMethod"
    >
      <el-table-column :selectable="selectable" align="center" type="selection" width="40" v-if="selection" class="el-checkbox" />
      <template v-for="(item, index) in tableHeader" :key="index">
        <!-- 多级表头 -->
        <el-table-column :fixed="item.fixed" :label="(item as any).label" v-if="item.Multistage" align="center" show-overflow-tooltip="none">
          <el-table-column
            align="center"
            :prop="columns.prop"
            :label="columns.label"
            v-for="columns in item.children"
            :width="(columns as any).width"
          >
            <template #default="scope">
              <!-- 普通列 -->
              <div
                @click="(e: any) => $emit('currentRow', scope.row, columns, item)"
                @dblclick="$emit('currentRow1', scope.row)"
                :class="columns.red && scope.row.red ? 'red' : columns.blue && scope.row.blue ? 'blue' : ''"
                v-if="
                  !columns.type &&
                  !columns.bgColor &&
                  !columns.cfmFlag &&
                  !columns.change &&
                  !columns.backgroundColor &&
                  !columns.backgroundColor2 &&
                  !columns.backgroundColor3
                "
              >
                <span>
                  {{ scope.row[columns.prop] }}
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <!-- 单表头 -->
        <el-table-column
          v-else
          align="center"
          :prop="(item as any).prop"
          :label="(item as any).label"
          :width="(item as any).width"
          :show-overflow-tooltip="showToolTip"
          class="f12"
          :sortable="item.sortable"
          :fixed="item.fixed"
        >
          <template #default="scope">
            <!-- select列 -->
            <el-select-v2
              @visible-change="(visible: boolean) => $emit('visibleChangeV2',visible, scope.row, item.prop)"
              class="selectV2"
              popper-class="selectV2"
              v-if="item.type === 'selectV2' && scope.row.addAndUpdate"
              filterable
              v-model="scope.row[item.prop]"
              :options="item.options"
            >
              <template #default="{ item }: any">
                <el-tooltip placement="top">
                  <template #content> {{ item.label }} </template>
                  <span style="">{{ item.label }}</span>
                </el-tooltip>
                <!-- <span style="">{{ item.label }}</span> -->
              </template>
            </el-select-v2>

            <!-- tableHeader要Options的select -->
            <el-select
              class="select"
              v-else-if="item.type === 'select' && scope.row.addAndUpdate && !item.change"
              size="small"
              placeholder=""
              filterable
              v-model="scope.row[item.prop]"
              :disabled="scope.row.disable && item.disable"
              :class="scope.row.backgroundColor99 && !item.disableBC ? scope.row.backgroundColor99 : 'white'"
              :allow-create="item.allowCreate === false ? item.allowCreate : true"
              default-first-option
              style="border: none"
              @change="$emit('selectValChange', scope.row, scope.row[item.prop])"
            >
              <el-option v-for="option in item.options" :key="option.value" :label="option.label" :value="option.value" style="margin: 0 auto">
                <span v-if="option.LeftLabel" style="float: left; margin-right: 15px">{{ option.LeftLabel }}</span>
                <span v-if="option.RightLabel" style="float: right; color: var(--el-text-color-secondary); font-size: 13px"
                  >{{ option.RightLabel }}
                </span>
              </el-option>
            </el-select>

            <!-- row要Options的select -->
            <el-select
              class="selectR"
              v-else-if="item.type === 'selectR' && scope.row.addAndUpdate && !item.change"
              clearable
              size="small"
              placeholder=""
              filterable
              v-model="scope.row[item.prop]"
              :disabled="scope.row.disable && item.disable"
              :class="scope.row.backgroundColor99 && !item.disableBC ? scope.row.backgroundColor99 : 'white'"
              allow-create
              default-first-option
              style="border: none"
            >
              <el-option v-for="option in scope.row.options" :key="option.value" :label="option.label" :value="option.value" style="margin: 0 auto">
                <span v-if="option.LeftLabel" style="float: left; margin-right: 15px">{{ option.LeftLabel }}</span>
                <span v-if="option.RightLabel" style="float: right; color: var(--el-text-color-secondary); font-size: 13px"
                  >{{ option.RightLabel }}
                </span>
              </el-option>
            </el-select>

            <!-- 如果这一列是select，并且想要input输入框 (tableHeader要有type) -->
            <el-input
              v-else-if="scope.row.type === 'input' && !item.change && item.type"
              v-model="scope.row[item.prop]"
              placeholder=""
              size="small"
              clearable
              @change="inputBlur(scope.row, item.label, 'input')"
              :disabled="scope.row.disable && item.disable"
              :class="item.start ? 'start' : ''"
            ></el-input>

            <!-- 单独日期列 -->
            <div v-else-if="item.type === 'dateSingle' && scope.row.addAndUpdate && !item.change" style="width: 100%">
              <el-date-picker v-model="scope.row[item.prop]" type="date" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
            </div>

            <!-- 带背景颜色的列（根据backgroundColor判断） -->
            <div
              v-else-if="item.backgroundColor"
              :style="{ backgroundColor: scope.row.backgroundColor, width: '100%' }"
              @click="$emit('currentRow', scope.row, item)"
            >
              <span :class="item.red && scope.row.red ? 'red' : ''" style="width: 100%">{{ scope.row[item.prop] }}</span>
            </div>

            <!-- input -->
            <el-input
              v-else-if="scope.row.addAndUpdate && !item.change && !item.type"
              v-model="scope.row[item.prop]"
              placeholder=""
              size="small"
              clearable
              @change="inputBlur(scope.row, item.label, 'input')"
              :disabled="scope.row.disable && item.disable"
              :class="item.start ? 'start' : ''"
              @click="$emit('currentRow', scope.row)"
            ></el-input>

            <!-- checkbox列 -->
            <el-checkbox
              v-else-if="item.type === 'checkbox'"
              :disabled="!scope.row.change || item.disable"
              v-model="scope.row[item.prop]"
              size="large"
              @change="$emit('checkboxChange', item.prop, scope.row)"
            />

            <!-- 对钩和错误的列 -->
            <div class="imgDiv" v-else-if="scope.row.addAndUpdate && item.type === 'svg'">
              <!-- 对钩 -->
              <svg
                v-if="scope.row[item.prop]"
                t="1721962134564"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1014"
                width="14"
                height="14"
              >
                <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#52C41A" p-id="1015"></path>
                <path
                  d="M178.614857 557.860571a42.496 42.496 0 0 1 60.123429-60.050285l85.942857 87.625143a42.496 42.496 0 0 1-60.050286 60.123428L178.614857 557.860571z m561.005714-250.148571a42.496 42.496 0 1 1 65.097143 54.637714L394.459429 725.577143a42.496 42.496 0 0 1-65.097143-54.637714l410.112-363.373715z"
                  fill="#FFFFFF"
                  p-id="1016"
                ></path>
              </svg>
              <!-- 错误 -->
              <svg
                v-else
                t="1721962076071"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6277"
                width="14"
                height="14"
              >
                <path
                  d="M512 0a512 512 0 0 0-512 512 512 512 0 0 0 512 512 512 512 0 0 0 512-512 512 512 0 0 0-512-512z"
                  fill="#FD6B6D"
                  p-id="6278"
                ></path>
                <path
                  d="M513.755429 565.540571L359.277714 720.018286a39.058286 39.058286 0 0 1-55.296-0.073143 39.277714 39.277714 0 0 1 0.073143-55.442286l154.331429-154.331428-155.062857-155.136a36.571429 36.571429 0 0 1 51.712-51.785143l365.714285 365.714285a36.571429 36.571429 0 1 1-51.785143 51.785143L513.755429 565.540571z m157.549714-262.582857a35.254857 35.254857 0 1 1 49.737143 49.737143l-106.057143 108.982857a35.254857 35.254857 0 1 1-49.883429-49.810285l106.203429-108.982858z"
                  fill="#FFFFFF"
                  p-id="6279"
                ></path>
              </svg>
            </div>

            <!-- 操作列 -->
            <div v-else-if="item.type === 'function'">
              <el-button
                :style="{ backgroundColor: item2.bgColor }"
                v-for="item2 in item.prop"
                type="primary"
                size="default"
                class="primaryBth"
                @click="$emit('download', scope.row, item2)"
                >{{ item2.label }}</el-button
              >
            </div>

            <!-- 兜底列 -->
            <div
              :class="item.start ? 'start' : ''"
              style="width: 100%"
              @click="(e: any) => $emit('currentRow', scope.row, scope, e, item.prop)"
              v-else
            >
              <span style="width: 100%"> {{ scope.row[item.prop] }} </span>
            </div>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script lang="ts">
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
import { debounce } from 'lodash'
import { storeToRefs } from 'pinia'
import { defineComponent, ref, type PropType, computed, onMounted, nextTick, toRefs, watch } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'JTable'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import {
  ElMessage,
  ElMessageBox,
  ElTable,
  type UploadFile,
  type UploadFiles,
  type UploadProgressEvent,
  type UploadProps,
  type UploadRequestOptions
} from 'element-plus'

const token = computed(() => {
  const token = sessionStorage.getItem('Authorization')
  if (token) {
    return token
  } else {
    return 'LTF_token'
  }
})
const objectSpanMethod = (params: any) => {
  if (typeof props.objectSpanObj === 'function') {
    return props.objectSpanObj(params)
  }
  return props.objectSpanObj
}

const emitSelectValue = debounce((row: any, e: any) => {
  emits('emitSelectValue', row, e)
}, 500) // 2000ms 防抖延迟时间

// 点击变色
const handleRowClick = (row: any, column: any, event: any) => {}

// props传入模块
interface selectOptionsType {
  key: string
  label: string
  value: string
}
interface tableHeader {
  prop: any
  width?: string | undefined
  label: string
  sortable?: boolean
  type?: string
  selectOptions?: selectOptionsType[]
  fixed?: string
  bgColor?: string
  cfmFlag?: string
  img?: boolean
  srcList?: string[]
  Multistage?: boolean
  children?: tableHeader[]
  imgAction?: string
  change?: string
  backgroundColor?: string
  backgroundColor2?: string
  backgroundColor3?: string
  tooltipVal?: string
  disable?: boolean
  disableBC?: boolean
  PageModule?: boolean
  allowCreate?: boolean
  imgData?: any
  disabled?: boolean
  allChange?: boolean
  tableSelect?: any
  red?: any
  options?: any
  start?: any
  blue?: any
}
type TableHeaderType = tableHeader[]
const props = defineProps({
  isSingleSelect: {
    type: Boolean,
    default: false
  },
  headerStyle: {
    required: false,
    default: { color: '#191919', padding: '0', height: '26px', 'border-right': 'none' }
  },
  objectSpanObj: {
    type: [Object, Function] as PropType<object | Function>,
    required: false,
    default: {
      rowspan: 1,
      colspan: 1
    }
  },
  TableHeight: {
    type: Number as PropType<number>,
    required: false,
    default: 100
  },
  outTableHeight: {
    type: Number as PropType<number>,
    required: false,
    default: 80
  },
  tableColumns: Array,
  tableData: Array,
  tableHeader: [Array] as PropType<TableHeaderType>,
  selection: Boolean,
  refJ: {
    type: Boolean,
    required: false,
    default: false
  },
  summary: Boolean,
  summaryData: Array,
  isLoading: {
    required: true,
    type: Boolean,
    default: false
  },
  getTableList: {
    type: Function as any
  },
  clearSelection: {
    type: Function as any
  },
  showToolTip: {
    type: Boolean,
    default: true
  },
  tableClass: {
    type: Boolean,
    default: false
  },
  rowKey: {
    type: String,
    default: ''
  }
})

// 适配模块
const height = ref()
function setFit() {
  // console.log(document.getElementsByClassName("app-main")[0].clientHeight, document.getElementsByClassName("find")[0].clientHeight);
  // card里面除了表格的高度

  // 表格实际占的高 = 屏幕高度 - card之外的高 - card的padding（20px,上下各10px） - card里面除了表格的高度
  let contentHeight = innerHeight - (document.getElementsByClassName('find')[0]?.clientHeight + 107 + 10) - 20 - props.outTableHeight
  if (document.getElementsByClassName('find').length === 2) {
    contentHeight =
      innerHeight -
      (document.getElementsByClassName('find')[0]?.clientHeight + 107 + 10 + document.getElementsByClassName('find')[1]?.clientHeight) -
      20 -
      props.outTableHeight
  }

  height.value = (contentHeight * props.TableHeight) / 100
  // //  主体的高度
  // const mainContainerHeight = data.height;
  // // 导航的高度
  // const navHeight = data.x;
  // //  内容高度
  // const contentHeight = mainContainerHeight - navHeight;
  // // vh,px 30 === 30%
  // // 30  tableHeight
  // const tableHeight = 30;
  // const itemHeight = (contentHeight * tableHeight) / 100;
}
onMounted(() => {
  setFit()
})

let clientWidth = ref(document.body.clientWidth)
window.onresize = () => {
  return setFit()
}
// 修改表格标题样式
const headerStyle = ({ row, column, rowIndex, columnIndex }: any) => {
  return props.headerStyle
}

// 修改表格体样式
const cellStyle = ({ row, column, rowIndex, columnIndex }: { row: any; rowIndex: number; column: TableColumnCtx<any>; columnIndex: number }) => {
  return { color: '#191919', 'border-bottom': '0.5px solid var(--J-table-border-color)', padding: '0', height: '26px', width: '200px' }
}

// 表格总计函数
const getSummaries = (param: any) => {
  const { columns, data } = param
  const sums: string[] = []
  props.summaryData?.forEach((item: any) => {
    columns.forEach((column: any, index: any) => {
      if (index === 0) {
        sums[index] = '总计'
      }
      if (index === item.index) {
        sums[index] = item.num
      }
    })
  })
  return sums
}
const imgIndex = ref(0)
// 点击图片
const imgClicked = (src: any, srcList: any) => {
  let index = srcList.findIndex((item: any) => item === src)
  imgIndex.value = index
}
// 传出模块
const emits = defineEmits([
  'currentRow',
  'selectList',
  'sortChange',
  'cancelChange',
  'confirmChange',
  'currentRow1',
  'focusInput',
  'clearSelection',
  'checkboxChange',
  'selectListShow',
  'selectListUnShow',
  'filterMethod',
  'selectValChange',
  'uploadImg',
  'successUpload',
  'inputChange',
  'download',
  'filterMethodSlot',
  'tableRef',
  'emitSelectValue',
  'visibleChangeV2',
  'objectSpanMethod'
])
const selectList = (selectedList: any) => {
  emits('selectList', selectedList, multipleTableRef.value)
  if (props.isSingleSelect) {
    multipleTableRef.value!.setCurrentRow(selectedList[selectedList.length - 1])
    if (selectedList.length <= 1) {
      return
    }
    multipleTableRef.value!.toggleRowSelection(selectedList[0], false)
    multipleTableRef.value!.setCurrentRow(selectedList[selectedList.length - 1])
  }
}

// 排序触发函数
const sortChange = (a: any) => {
  const { column, prop, order } = a
  emits('sortChange', order, prop, column)
}

// 修改单元格后失去焦点
const inputBlur = (row: any, currentLabel: any, type: string) => {
  // 不触发ElMessageBox
  if (row.disableConfirm) {
    // 表格下拉框修改后触发
    if (type === 'select') {
      emits('selectValChange', row, currentLabel)
    } else if (type === 'input' || type === 'backgroundColor') {
      emits('inputChange', row, currentLabel, multipleTableRef.value)
    }
    return
  } else {
    ElMessageBox.confirm('是否修改？', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        emits(
          'confirmChange',
          row,
          (i: any) => {
            props.getTableList()
            document.querySelectorAll('.el-input__inner').forEach((item: any) => item.blur())
          },
          currentLabel
        )
        document.querySelectorAll('.el-input__inner').forEach((item: any) => item.blur())
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消修改'
        })
        props.getTableList()
        document.querySelectorAll('.el-input__inner').forEach((item: any) => item.blur())
      })
  }
}

// 上传图片模块
const imageUrl = ref('')
const handleAvatarSuccess = (response: any, uploadFile: any, uploadFiles: any, row: any) => {
  emits('successUpload', response.data, row)
  JMessage.success(response.message)
  props.getTableList()
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile: any) => {
  if (rawFile.type !== 'image/jpeg') {
    JMessage.error('必须上传JPG格式图片')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    JMessage.error('图片最大2MB')
    return false
  }
  return true
}
const uploadProgress = (evt: UploadProgressEvent, uploadFile: UploadFile, uploadFiles: UploadFiles) => {}
// 多选框是否可以勾选
const selectable = (row: any, index: any) => {
  if (row.change === null) {
    return false
  } else {
    return true
  }
}

let copyOptions = ref([])
const copyFn = (selectOptions: any) => {
  copyOptions.value = JSON.parse(JSON.stringify(selectOptions))
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
onMounted(() => {
  emits('tableRef', multipleTableRef.value)
})
</script>

<style lang="less" scoped>
.blue {
  color: #2700fd;
}
.select {
  :deep(.el-select__suffix) {
    display: none !important;
  }
}
.selectV2 {
  :deep(.el-select__suffix) {
    display: none !important;
  }
}
.selectR {
  display: block !important;
}

:deep(.el-vl__wrapper) {
  padding: 0 !important;
  background-color: red;
  // .el-select-dropdown__item {
  //   padding: 0 !important;
  // }
}

.start {
  :deep(.el-input__inner) {
    text-align: start !important;
  }
  text-align: start !important;
  justify-content: start !important;
}
:deep(.el-checkbox) {
  height: 100% !important;
  background-color: white;
  display: flex;
  width: 100%;
  justify-content: center;
}

:deep(.el-table td.el-table__cell div) {
  color: var(--el-text-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

:deep(.el-input--small) {
  --el-input-height: 26px;
  text-align: center;
}

:deep(.is-hovering) {
  background-color: #fff5eb;
  border: none;
  box-shadow: none;
}

:deep(.el-select__wrapper) {
  padding: 0;
  height: 100%;
  width: 100%;
  box-shadow: none;
  background-color: transparent;
}

:deep(.el-select__selected-item) {
  text-align: center;
}

:deep(.el-input.is-disabled .el-input__wrapper) {
  box-shadow: none;
}

.\#FF8080 {
  :deep(.el-input__inner) {
    background-color: #ff8080 !important;
    height: 100%;
  }
}

.\#80E0E0 {
  :deep(.el-input__inner) {
    background-color: #80e0e0 !important;
    height: 100%;
  }
}

.\#FFE000 {
  :deep(.el-input__inner) {
    background-color: #ffe000 !important;
    height: 100%;
  }
}

.\#EAEFF5 {
  :deep(.el-input__inner) {
    background-color: #eaeff5 !important;
    height: 100%;
  }
}

.\#80c080 {
  :deep(.el-input__inner) {
    background-color: #80c080 !important;
    height: 100%;
  }
}

.\#ffc0ff {
  :deep(.el-input__inner) {
    background-color: #ffc0ff !important;
    height: 100%;
  }

  :deep(.el-input__wrapper) {
    background-color: #ffc0ff !important;
  }
}

// 合计样式
:deep(.el-table .el-table__cell) {
  padding: 0;
}

.table {
  // 取消左侧边框
  :deep(.el-table__border-left-patch) {
    width: 0;
  }

  .imgDiv {
    height: 26px;
    width: 100%;

    .img {
      width: 70px;
      height: 26px;
    }
  }

  // tooltip样式
  .tooltip-base-box {
    width: 600px;
  }

  .tooltip-base-box .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .tooltip-base-box .center {
    justify-content: center;
  }

  .tooltip-base-box .box-item {
    width: 110px;
    margin-top: 10px;
  }

  //
  :deep(.el-input__wrapper) {
    box-shadow: none;
    background-color: transparent;
    padding: 0;
  }

  // 表格最上面边框
  :deep(.el-table--border .el-table__inner-wrapper::after) {
    opacity: 0;
  }

  // 表格底部边框
  :deep(.el-table__inner-wrapper::before) {
    opacity: 0;
  }

  // 总计增加边框
  :deep(.el-table__footer-wrapper) {
    border-top: none;
    border-left: 1px solid var(--el-table-border-color);
    border-bottom: 1px solid var(--el-table-border-color);
  }

  :deep(.el-table--border::before) {
    position: relative;
  }

  // 表格最外边框
  :deep(.el-table--border.el-table--group) {
    border: none;
  }

  // 头部边框
  :deep(.customer-table thead tr th.is-leaf) {
    // border: 1px solid #EBEEF5;
    border-right: none;
  }

  // 取消左侧头部边框
  :deep(.el-table--border .el-table__inner-wrapper tr:first-child th:first-child) {
    border-left: none;
  }

  // 表格最外层边框-底部边框
  :deep(.el-table--border::after, .el-table--group::after) {
    width: 0;
  }

  :deep(.customer-table::before) {
    width: 0;
  }
}

:deep(.el-input) {
  --el-input-focus-border: #fff;
  --el-input-transparent-border: 0 0 0 0px;
  --el-input-border-color: #fff;
  --el-input-hover-border: 0px !important;
  --el-input-hover-border-color: #fff;
  --el-input-focus-border-color: #fff;
  --el-input-clear-hover-color: #fff;
  box-shadow: 0 0 0 0px !important;
  --el-input-border: 0px;
}

:deep(.el-select__wrapper:hover) {
  background-color: #fff5eb;
}

:deep(.el-select .el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 0px !important;
}

:deep(.el-select .el-input.is-focus .el-input__wrapper) {
  box-shadow: 0 0 0 0px !important;
}

:deep(.el-select) {
  --el-select-border-color-hover: #fff;
}

// :deep(.cell.el-tooltip:nth-child(1)){
//   // border-left: none;
//   border: 1px solid red;
// }

:deep(.el-table__body-wrapper .el-table__body .el-table__row > td) {
  border-left: 1px solid var(--J-table-border-color);
}
</style>

<!-- 上传图片样式 -->
<style>
.avatar {
  height: 26px;
}

.avatar-uploader {
  height: 26px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-uploader .el-upload {
  height: 20px;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.svg-container {
  font-size: 28px;
  color: #8c939d;
  width: 70px;
  text-align: center;
  display: flex !important;
  align-items: center;
  justify-content: center;
  /* vertical-align: middle; */
  /* display: inline-block; */
}

/* 用来设置当前页面element全局table 选中某行时的背景色*/

:deep(.el-input__prefix-inner) {
  display: none;
}

.red {
  color: #ff0000;
  font-size: 18px !important;
}
</style>
